<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>新市民卡消费查询</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 

 <script type="text/javascript" src="<%=basePath%>/js/iscroll.js"></script>

  
 
<script type="text/javascript">
var str=new Array(); 
var flag = false;
$(document).ready(function(){
	  $("#input").click(function(){
		  flag = true;
		  var usr = document.getElementById("username").value;

		  if(usr.length==0){
		  	alert("账号不能为空！");
		  	return;
		  }
		$.ajax({
			url:"queryNewcard.html",
			type:"post",
			dataType:"json",
			async: false,
			data:{username:$("#username").val()},
			success:function(data){
				
				if(data.length==0){
					alert("您输入的账号错误！");
					return;
				}
				$(data).each(function(index){
					var val = data[index];
					
					
			//	alert(val.cash);
			//	alert(data.account1);
				$("#cash").html(val.cash+"元");
				$("#account1").html(val.account1+"元");
				
				
				if(val.tradedate==null||val.tradedate==""||val.tradedate==undefined)
				{
				return;
				}
				 str[index]="消费日期："+val.tradedate+"   地点:"+val.tradeplace+"   金额:"+val.tradeamount+"元"+"   明细:"+val.tradebrief+"";
			
				
				 
				});
			},
			error:function() {
				alert("error");		
			}
		
		
		});
	
		if(str.length<10){		  
			 	for(var j=0;j<str.length;j++)
			 	{
			 	 var html ="<li class='div_append"+j+"' style='background-color:white; height:auto;-webkit-text-size-adjust:none;font-size:12px;' ></li>";
		         $("#thelist").append(html);
		          $(".div_append"+j).html(str[j]);
			 	
			 	}
			 	
			}
			
			else if(str.length>=10){
			 
			 for(var j=0;j<10;j++)
			 	{
			 	 var html ="<li class='div_append"+j+"' style='background-color:white; height:auto;-webkit-text-size-adjust:none;font-size:12px;' ></li>";
		         $("#thelist").append(html);
		           $(".div_append"+j).html(str[j]);
			 	
			 	}
			
			
		
			}
	
	  });


	var x=10;
$("#btn_click").click(function(){
	
	var usr = document.getElementById("username").value;
	  

	  if(usr.length==0){
	  	alert("账号不能为空！");
	  	return;
	  }
	  else if(flag == true){
		flag == false;
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
	/*	var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = '暂无......' ;
			el.appendChild(li, el.childNodes[0]);
		}
		*/
		for (var i=x; i<x+10; i++) {	
			if(i>str.length){
				alert("无更多消费记录！");
		//		str[i]="已显示您的所有消费记录";
		//		var html ="<li class='div_append"+i+"' style='background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;' ></li>";
		//		  $("#thelist").append(html);
				//	alert(str.length);
		//		  $(".div_append"+i).html(str[i]);
				  break;
			}
			else{
		     var html ="<li class='div_append"+i+"' style='background-color:white; height:auto;-webkit-text-size-adjust:none;font-size:12px;' >已显示您的所有消费记录</li>";
			  $("#thelist").append(html);
			//	alert(str.length);
			  $(".div_append"+i).html(str[i]);
			}
		}
			x=x+10;
		
		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 0);
	  }// <-- Simulate network congestion, remove setTimeout from production!
});  
});

function check(){
	var patt = /^[0-9]{11}$/;
	if(patt.test(document.getElementById("username").value) == false){
		alert("账号请输入11位数字！");
		return;
	}
}

</script>

<style type="text/css" media="all">
.form{
  width: 100%;
  margin: 0.3rem auto;
  font-size: 0.7rem;
  td{
    height: 2.5rem;
  }
  input{
    font-family: "Microsoft Yahei";
    outline: none;
    color: #d8d8d8;
  }
  input[type=text],input[type=phone],input[type=email]{
    border: 1px solid #e10000;
    height: 1.55rem;
    line-height: 1.55rem;
    padding-left: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
  }
  }
ul,li {
	padding:0;
	margin:0;
	border:0;
	
}


#scroller {
	
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:auto;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:12px;
}



</style>
</head>
<body>

   <div data-role="page">

        <div data-role="content" style="height:20%; background-color:#87C3DD;">
         <center> 
         <p style="font-size:20px;text-shadow:none;">新市民卡</p>
          </center> 
          </div>
     

  <div style="margin-top:30px;">
<form method="get">
    <table class="form">
        <tr>
            <td colspan="3"><input onchange="check()" style="background-color:white;" type="text" placeholder="请输入卡号" name="username" id="username"/><span></span></td>
        </tr>
        
         </table>
          <div style="margin-left:7%;margin-right:7%;">
          <input style="background-color:#ADDD89;" type="button"  id="input"  value="提交"/>
        
           </div>
            
</form>
</div>
  
  <div data-role="content" style="margin-top:20px;">
         <ul data-role="listview"  >
         <li style="background-color:white;font-size:15px;" >电子现金余额:<div id="cash" style="  height:20px;float:right;margin-right:30%"></div></li>
       
         </ul>
          </div>
 <div data-role="content"  style="padding:15px 2px 15px 2px;">
    <div data-role="collapsible">
      <h1>消费记录</h1>
      <div id="scroller">
      
		<ul id="thelist" >

			
			
			 
		</ul>

		 <div style="margin-left:25%;margin-right:25%;margin-top:10px;height:40px;background-color:#87C3DD;text-shadow:none;">
		 	<center style="padding-top:10px;">
          <span style=" font-size:16px;margin-top:5px;" id="btn_click" >点击查看更多记录</span>
        </center>
           </div>
           </div>
    </div>
  </div>

<div data-role="content" style="padding:0;height:40px;">
         <center> 
         <p>以上信息非实时记录，仅供参考</p>
          </center> 
          </div>

</div>
</body>
</html>